<template>
    <div class="container">
        <div class="icon-unit">
            <icon type="add" class="icon" />
            <div class="icon-unit-text"> add</div>
        </div>
        <div class="icon-unit">
            <icon type="qrcode" class="icon"/>
            <div class="icon-unit-text">qrcode</div>
        </div>
        <div class="icon-unit">
            <icon type="back" class="icon"/>
            <div class="icon-unit-text">back</div>
        </div>
        <div class="icon-unit">
            <icon type="close" class="icon"/>
            <div class="icon-unit-text">close</div>
        </div>
        <div class="icon-unit">
            <icon type="home" class="icon"/>
            <div class="icon-unit-text">home</div>
        </div>
        <div class="icon-unit">
            <icon type="drop-down" class="icon"/>
            <div class="icon-unit-text">drop-down</div>
        </div>
        <div class="icon-unit">
            <icon type="task" class="icon"/>
            <div class="icon-unit-text">task</div>
        </div>
        <div class="icon-unit">
            <icon type="stock" class="icon"/>
            <div class="icon-unit-text">stock</div>
        </div>
        <div class="icon-unit">
            <icon type="mine" class="icon"/>
            <div class="icon-unit-text">mine</div>
        </div>
        <div class="icon-unit">
            <icon type="material" class="icon"/>
            <div class="icon-unit-text">material</div>
        </div>
        <div class="icon-unit-empty" style="visibility: hidden"></div>
        <div class="icon-unit-empty" style="visibility: hidden"></div>
        <div class="icon-unit-empty" style="visibility: hidden"></div>

    </div>
</template>
<style>
    .container{
        display:flex;
        flex-flow:row wrap;
        justify-content: space-between
    }
    .icon{
        font-size: 36px;
    }
    .icon-unit{
        align-items: center;
        display: flex;
        flex-flow: column;
        width: calc(20% - 22px);
        margin: 10px;
        padding: 20px 0px;
        border: 1px solid #ccc;
        flex-shrink: 0;
    }
    .icon-unit:hover{
        background: #f0f0f0;
        cursor: pointer;
    }
    .icon-unit-text{
        color: #666;
        font-size: 14px;
        margin-top: 10px;
    }
    .icon-unit-empty{
        width: calc(20% - 22px);
        flex-shrink: 0;
        margin: 10px;
        height: 0px;
    }
</style>
